<template>
  <!-- <div class="content">
    <el-card class="card"> -->
  <LayoutContent>
    <div class="button">
      <el-button type="primary" size="small" @click="handleClick('add')" v-if="!isStu">新增成绩</el-button>
      <el-button type="primary" size="small" @click="handleClick('batch')" v-if="!isStu">批量新增成绩</el-button>
      <!-- <el-button type="primary" size="small" @click="handleClick('导入')" v-if="!isStu">导入excel</el-button> -->
      <el-button type="primary" size="small" @click="handleClick('导出')">导出excel</el-button>
      <BasicExcel action="/api/excel/score" v-if="!isStu" />
    </div>
    <!-- 搜索条件 -->
    <div class="form">
      <el-form :inline="true" :model="form">
        <el-form-item label="学生姓名:" v-if="!isStu">
          <el-input v-model="form.studentName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="考试名称:">
          <el-input v-model="form.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="课程:">
          <el-input v-model="form.courseName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="教师:">
          <el-input v-model="form.teacherName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleClick('select')">搜索</el-button>
          <el-button type="primary" size="small" @click="handleClick('rest')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <div style="height: 55vh">
      <BasicTable :columns="columns" border :tableData="tableData" :page="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
        <template #grade="{ row }"> {{ getGrade(row.grade) }}</template>
        <template #status="{ row }"> <BasicTab :codeList="statusCode" :state="row.score >= row.max * 0.6 ? 1 : 2" /></template>
        <template #term="{ row }">{{ row.term == 1 ? '上学期' : '下学期' }} </template>
        <template #operation="{ row }">
          <el-button link type="primary" size="small" @click="handleClick('detail', row.id)">详情</el-button>
          <el-button link type="primary" size="small" @click="handleClick('update', row.id)" v-if="!isStu">修改</el-button>
          <el-button link type="primary" size="small" @click="handleClick('delete', row.id)" v-if="!isStu">删除</el-button>
        </template>
      </BasicTable>
    </div>
  </LayoutContent>
  <!-- </el-card>
  </div> -->
</template>

<script setup>
import { deleteApi, getListApi, exportApi } from '@/api/score/index'
import { computed, inject, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/user'
const isStu = inject('isStu')
const isTea = inject('isTea')

// 搜索条件
const form = ref({
  name: '',
  studentName: '',
  courseName: '',
  teacherName: '',
})
// 表格
const tableData = ref([])
const columns = [
  {
    prop: 'index',
    label: '序号',
  },
  {
    prop: 'courceId',
    label: '课程编号',
  },
  {
    prop: 'name',
    label: '考试名称',
  },
  {
    prop: 'courseName',
    label: '课程',
  },
  {
    prop: 'max',
    label: '满分',
  },
  {
    prop: 'studentName',
    label: '姓名',
    hide: isStu.value,
  },
  {
    prop: 'score',
    label: '分数',
    sort: true,
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
  },
  {
    prop: 'teacherName',
    label: '教师',
    hide: isTea.value,
  },
  {
    prop: 'grade',
    label: '年级',
  },
  {
    prop: 'term',
    label: '学期',
  },
  {
    prop: 'createTime',
    sort: true,
    label: '创建时间',
    hide: isStu.value,
  },
  {
    prop: 'updateTime',
    sort: true,
    label: '更新时间',
    hide: isStu.value,
  },
  {
    prop: 'operation',
    width: 200,
    label: '操作',
  },
]
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})

const getList = async () => {
  const res = await getListApi({ ...page.value, ...form.value })
  if (res.code == 200) {
    res.data.records.forEach((item, index) => {
      item.score = Number(item.score)
    })
    tableData.value = res.data.records
    page.value.total = res.data.total
  } else {
    ElMessage.error(res.msg)
  }
}

onMounted(() => {
  getList()
})
const handleCurrentChange = (value) => {
  page.value.currentPage = value
  getList()
}
const handleSizeChange = (value) => {
  page.value.pageSize = value
  getList()
}

const router = useRouter()
const handleClick = (type, id) => {
  switch (type) {
    case 'delete': // 删除
      deleteData(id)
      break
    case 'detail': // 详情
      router.push({ path: '/score/detail', query: { id } })
      break
    case 'select': // 查询
      selectData()
      break
    case 'add': // 新增
      router.push({ path: '/score/add' })
      break
    case 'update': // 修改
      router.push({ path: '/score/add', query: { id } })
      break
    case 'batch': // 批量新增
      router.push({ path: '/score/batch', query: { id } })
      break
    case '导入':
      break
    case '导出':
      exportData()
      break
    case 'rest': // 重置
      restForm()
      break
  }
}
// 导出
const user = useUserStore()
const exportData = async () => {
  window.open('api/excel/score?identity=' + user.user?.identity + '&account=' + user.user?.account, '_blank')
}

// 删除
const deleteData = async (id) => {
  const res = await deleteApi({ id })
  if (res.code == 200) {
    getList()
    ElMessage.success(res.msg)
  } else {
    ElMessage.error(res.msg)
  }
}

// 搜索
const selectData = () => {
  getList()
}

// 重置搜索
const restForm = () => {
  form.value = {
    name: '',
    studentName: '',
    courseName: '',
    teacherName: '',
  }
  page.value = {
    currentPage: 1,
    pageSize: 10,
    total: 10,
  }
  getList()
}

const getGrade = computed(() => {
  return (grade) => {
    let text = ''
    switch (grade) {
      case 1:
        text = '大一'
        break
      case 2:
        text = '大二'
        break
      case 3:
        text = '大三'
        break
      case 4:
        text = '大四'
        break
    }
    return text
  }
})
const statusCode = reactive([
  {
    state: 1,
    type: 'success',
    title: '及格',
  },
  {
    state: 2,
    type: 'danger',
    title: '不及格',
  },
])
</script>

<style scoped lang="scss">
.card {
  height: 100%;
  .button {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
}
:deep(.el-form-item__content) {
  min-width: 200px;
}
</style>
